<!doctype html>
<html>
<head>
        <meta charset="UTF-8">

        <link rel="stylesheet" type="text/css" href="/css/detail.css">
        <link rel="stylesheet" type="text/css" href="/css/common.css">
        <script type="text/javascript" src="/js/jquery-1.12.3.min.js"></script>
        <script src="/js/detail.js"></script>
        <script type="text/javascript" src="/js/common.js"></script>
<meta charset="utf-8">
<title>小米为发烧而生</title>
<script src="/js/jquery.js"></script>

<style>
/*重置属性*/
*{ font-family:"微软雅黑"; font-size:14px; padding:0; margin:0;}
img{ display:block;}
a{ text-decoration:none;}
ul{ list-style:none;}
p,dl,dd{ margin:0; padding:0;}
/*公共属性*/
.clearfix{ clear:both;}
.shadow{box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.2);}
/*头部属性*/
.top_box{ background-color:#333;}
.nav{ width:1226px; margin:0 auto;}
.nav ul{ float:left;}
.nav li{ float:left; border-right:1px #424242 solid;margin-top:14px; margin-bottom:14px; }
.nav a{ color:#9a9898; display:block; padding-left:10px; padding-right:10px; }
.nav a:hover{ color:#fff;}
.login{float:right;}
.login .shop{ width:120px; height:48px; background-color:#424242; float:right;text-align:center;line-height:44px; position:relative; color:#9a9898; }
.bg01{background-image:url(images/buy01.png);background-image:url(images/buy.png); background-repeat:no-repeat;background-position:17px center; text-indent:30px; }
.bg02{background-image:url(images/buy.png);background-image:url(images/buy01.png); background-repeat:no-repeat;background-position:17px center; text-indent:30px;}
.login .current{background-color:#fff; color:#ff6700;}
.login .shop .car{ width:296px; height:98px; background-color:#fff; text-align:center; line-height:98px; color:#333; position:absolute;right:0;top:48px;}
.shadow_lf{ box-shadow:-2px 2px 5px #eee;}
.shadow_rt{ box-shadow:-2px 2px 5px #eee;}
.login a{ color:#9a9898;  }


/*导航属性*/
.mainbav{ width:1226px; margin:0 auto;}
.mainbav .LOGO{ float:left;margin-top:20px;width:240px;}
.LOGO img{ float:left;}
.mainbav ul{ float:left;}
.mainbav ul li{ float:left; margin-le ft:16px; margin-right:16px; line-height:100px;}
.mainbav li a{ font-size:16px; color:#333;}
.mainbav li a:hover{ color:#ff6700;}
.search{ width:294px; height:48px; border:1px #e0e0e0 solid; float:right; margin-top:25px;}
.search .search_box{ width:50px; height:48px; border-left:1px #e0e0e0 solid; float:right;}
.search .search_box img{margin-left:17px; margin-top:16px;}
.search span{ float:right; font-size:12px; color:#757575; margin-top:14px; margin-right:10px; background-color:#eee; padding:3px 5px;}
.search span:hover{ background-color:#ff6700; color:#fff;}

/*页脚*/
.footer-box{ width:100%; background-color:#fff;}
.footer{ width:1226px; margin-left:auto; margin-right:auto;}
.footer ul{ margin-top:27px; margin-bottom:27px;}
.footer li{ float:left; width:244px; height:26px; border-right:1px solid #e0e0e0; text-align:center;line-height:26px;}
.footer li a{  color:#616161;}
.footer li a:hover{ color:#ff6700;}
.line{ width:1226px; height:1px; background-color:#e0e0e0; margin-bottom:40px;}
.footer dl{ margin-right:104px; float:left; margin-bottom:25px;}
.footer dd{  margin-bottom:15px; }
.footer dd a{font-size:12px; font-family:"宋体";color:#757575;}
.footer dd a:hover{ color:#ff6700;}
.online{ width:246px; text-align:center; float:left;}
.service{margin-left:auto; margin-right:auto; width:120px; height:30px; border:1px solid #ff6700; line-height:30px; text-align:center; color:#ff6700; font-weight:Arial,"微软雅黑"; font-size:12px;}

/*合作*/
.team-box{ width:100%; background-color:#f5f5f5; padding-top:33px;}
.team{ width:1226px; margin-left:auto; margin-right:auto;}
.team .logo{ float:left; margin-right:3px;}
.team a{ border-right:1px solid #b0b0b0; line-height:12px; padding-left:5px; padding-right:5px; font-family:Arial,"宋体"; font-size:12px; color:#757575;}
.team p{font-family:Arial,"宋体"; font-size:12px; margin-bottom:2px; float:left; color:#b0b0b0;}
.team p a:hover{ color:#ff6700;}
.team .safe{ float:left; width:285px;}
.safe span{ float:left; width:60px; margin-right:4px;}
.word{ width:1226px; margin-left:auto; margin-right:auto; text-align:center;font-family:"华文行楷",sunself; font-size:20px; color:#bababa; font-weight:normal; padding-bottom:30px;}
</style>
</head>
<body>
<!--头部属性-->
<div class="top_box">
    <div class="nav">
        <ul>
            <li style="margin-left:0; padding:0;"><a href="{$Think.const.THINK_URL}">小米网</a></li>
            <li><a href="http://www.miui.com/">MIUI</a></li>
            <li><a href="http://www.miliao.com/">米聊</a></li>
            <li><a href="http://game.xiaomi.com/hy/index.html">游戏</a></li>
            <li><a href="http://www.duokan.com">多看阅读</a></li>
            <li><a href="https://i.mi.com/">云服务</a></li>
            <li><a href="http://www.mi.com/c/appdownload/">小米网移动版</a></li>
            <li><a href="http://static.mi.com/feedback/">问题反馈</a></li>
        </ul>
        <div class="login">

            <div class="shop"><div class="bg01"><a href="{$Think.const.THINK_URL}/index/index/goodcar" style="color:#f90">购物车({$gnumber})</a></div>
                <div class="car">购物车中还没有商品，赶紧选购吧！</div>
            </div>
            {if null == $Think.session.username}
            <ul>
                <li><a href="{$Think.const.THINK_URL}/index/user/login">登录</a></li>
                <li  style="border:0;"><a href="{$Think.const.THINK_URL}/index/user/register">注册</a></li>
            </ul>
            {else}
            <ul>
                <li><a href="{$Think.const.THINK_URL}/index/order/orders">我的订单</a></li>
                <li><a href="{$Think.const.THINK_URL}/index/order/addres">个人中心</a></li>
                <li><a href="{$Think.const.THINK_URL}/index/user/session">退出登陆</a></li>
            </ul>
            {/if}

        </div>
    </div>
    <div class="clearfix"></div>
</div>
<!--主导航-->
<div class="mainbav">
<div class="LOGO"><a href="{$Think.const.THINK_URL}"><img src="/images/LOGO.png"></a><img src="/images/donghua.gif"></div>
    <ul>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">小米盒子</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">红米</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">平板</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">电视</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">盒子</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">路由器</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">智能硬件</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">全部商品</a></li>
    </ul>
    <div class="search">
        <div class="search_box"><img src="/images/search.png"></div>
        <span>平衡车</span>
        <span>小米手机4c</span>
    </div>
    <div class="clearfix"></div>
</div>
<!--banner-->
        <!--********** detail_url 详情页的路径 *******************-->
        <div class="detail_url">
            <div class="container">
                <p class="detail_urlp">
                    <a href="#">首页</a>
                    <a href="#">配件</a>
                    <a href="#">保护壳/保护套</a>
                    <a class="noborder" href="#">只能显示保护套 金色</a>
                </p>
            </div>
        </div>
        <!--********** detail_introduce 详情页的商品介绍 *******************-->
        <div class="detail_introduce" style="overflow: hidden;height:500px;">
            <div class="container">
                <!--商品介绍左侧-->
                <div class="introduce_left">
                    <!--放大镜左侧-->
                    <div class="fdj_left" id="fdj_left">
                        <!--放大镜左侧的小图片-->
                        <div>       <!--boxglass-li-->
                            <ul class="small_img" id="small_img">

                            </ul>
                        </div>
                        <!--放大镜左侧的大图片-->
                        <div style="margin-top: 20px;">    <!-- smallBox-->
                            <ul class="big_img" id="big_img">
                            {foreach $good as $value}
                                <li class="bigimg active"><img src="/images/{$value.public}" /></li>
                            {/foreach}

                                <div id="tool" class="tool"></div>
                            </ul>
                            <!--放大镜-->

                        </div>
                    </div>

                    <!--********* 放大镜右侧 *********-->
                    <div class="fdj_right" id="fdj_right">    <!-- bigBox  bigImg-->

                    </div>
                </div>

                <!--商品介绍右侧-->
                <div class="introduce_right">
                    <ul>
                    {foreach $good as $value}
                        <li pid="110">
                            <h2 id="right_h">{$value.goodsname}</h2>
                            <p class="right_text" id="right_text"><span>{$value.summary}</span></p>
                            <p class="right_com" id="right_com">{$value.describe}</p>
                            <p class="right_price" id="right_price">{$value.price}元</p>
                            <p class="right_chose" id="right_chose"><img src="/image/{$value.public}" /></p>
                            <form action="{$Think.const.THINK_URL}/index/index/goodcar?id={$value.gid}" method="post" style="float: left">
                            <input type="submit" class="right_btn" name="jr" value="加入购物车">
                            </form>
                            <form>
                            <button class="right_btnn" name="lj"><a href="{$Think.const.THINK_URL}">立即购买</a></button>
                            </form>
                        </li>
                    {/foreach}
                    </ul>

                </div>
            </div>
        </div>
        
        <div class="body_position">
            <p class="position_p">恭喜您成功加入购物车<img id="false_img" src="/images/false.png"></p>
            <p class="position_pa"><a href="index.html">继续购物</a><a href="shoppingcar.html">去购物车结算</a></p>
        </div>

        <!-- detail_stairs 详情页的楼梯-->
        <div class="detail_stairs">
            <div class="container">
                <div class="detail_position">
                    <ul>
                        <li class="active">
                            <a href="#">详情描述</a>
                        </li>
                        <li>
                            <a href="#">规格参数</a>
                        </li>
                        <li>
                            <a href="#">评价晒单</a>
                        </li>
                        <li class="noborder">
                            <a href="#">售后服务与退换货流程</a>
                        </li>
                        <li class="last"></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- detail_main 详情页的楼梯主页内容-->
        <div class="detail_main">
            <div class="container">

                <div class="detail_show">
                    <div class="Louti_one">
                        <img src="/images/detail4.jpg" />
                        <img src="/images/detail5.jpg" />
                        <img src="/images/detail6.jpg" />
                        <img src="/images/detail7.jpg" />
                        <img src="/images/detail8.jpg" />
                        <img src="/images/detail9.jpg" />
                        <img src="/images/detail10.jpg" />
                        <img src="/images/detail11.jpg" />
                        <img src="/images/detail12.jpg" />
                        <img src="/images/detail13.jpg" />
                        <img src="/images/detail14.jpg" />
                        <img src="/images/detail15.jpg" />
                        <img src="/images/detail16.jpg" />
                    </div>
                    <div class="Louti_two">
                        <p class="Louti_title">售后服务与退换货流程</p>
                        <p class="Louti_line"></p>
                        <p class="louti_product">
                            <img src="/images/detail1.jpg" />

                            <span><i>材质PC+PU</i><i>尺寸：177.0*94.0*11.5mm</i><i>颜色：金色</i><i>商品编号:1161600007</i></span>
                        </p>
                    </div>
                    <div class="Louti_three">
                        <p class="Louti_title">评价晒单</p>
                        <p class="Louti_line"></p>
                        <img src="/images/detail21.jpg" />
                        <h2>最有帮助的评价</h2>
                        <ul class="three_ul">
                            <li>
                                <img class="three_img1" src="/images/detail22.jpg" />
                                <a href="#" class="three_a">小米Max完全匹配，不过价钱下调10-20性价比更好</a>
                                <p class="three_pline"></p>
                                <p class="three_text"><img src="/images/detail23.jpg" /><span>你们都是在这里买的吗？ - <i>杨涛</i></span></p>
                                <p class="three_data"><span>谭伟杰</span><i>2016年5月21日 深空灰</i></p>
                                <p class="three_help">
                                    <a hrel="#"><span><img src="/images/detail24.jpg" /></span><i>有帮助 (35)</i></a>
                                    <a class="noborder" href="#"><span><img src="images/detail25.jpg" /></span><i>无帮助 (1)</i></a>
                                </p>
                                <p class="three_like">超爱<img src="images/detail26.jpg" /></p>
                            </li>
                            <li>
                                <img class="three_img1" src="images/detail22.jpg" />
                                <a href="#" class="three_a">小米Max完全匹配，不过价钱下调10-20性价比更好</a>
                                <p class="three_pline"></p>
                                <p class="three_text"><img src="images/detail23.jpg" /><span>你们都是在这里买的吗？ - <i>杨涛</i></span></p>
                                <p class="three_data"><span>谭伟杰</span><i>2016年5月21日 深空灰</i></p>
                                <p class="three_help">
                                    <a hrel="#"><span><img src="images/detail24.jpg" /></span><i>有帮助 (35)</i></a>
                                    <a class="noborder" href="#"><span><img src="images/detail25.jpg" /></span><i>无帮助 (1)</i></a>
                                </p>
                                <p class="three_like">超爱<img src="images/detail26.jpg" /></p>
                            </li>
                            <li>
                                <img class="three_img1" src="images/detail22.jpg" />
                                <a href="#" class="three_a">小米Max完全匹配，不过价钱下调10-20性价比更好</a>
                                <p class="three_pline"></p>
                                <p class="three_text"><img src="images/detail23.jpg" /><span>你们都是在这里买的吗？ - <i>杨涛</i></span></p>
                                <p class="three_data"><span>谭伟杰</span><i>2016年5月21日 深空灰</i></p>
                                <p class="three_help">
                                    <a hrel="#"><span><img src="images/detail24.jpg" /></span><i>有帮助 (35)</i></a>
                                    <a class="noborder" href="#"><span><img src="images/detail25.jpg" /></span><i>无帮助 (1)</i></a>
                                </p>
                                <p class="three_like">超爱<img src="images/detail26.jpg" /></p>
                            </li>
                            <li>
                                <img class="three_img1" src="images/detail22.jpg" />
                                <a href="#" class="three_a">小米Max完全匹配，不过价钱下调10-20性价比更好</a>
                                <p class="three_pline"></p>
                                <p class="three_text"><img src="images/detail23.jpg" /><span>你们都是在这里买的吗？ - <i>杨涛</i></span></p>
                                <p class="three_data"><span>谭伟杰</span><i>2016年5月21日 深空灰</i></p>
                                <p class="three_help">
                                    <a hrel="#"><span><img src="images/detail24.jpg" /></span><i>有帮助 (35)</i></a>
                                    <a class="noborder" href="#"><span><img src="images/detail25.jpg" /></span><i>无帮助 (1)</i></a>
                                </p>
                                <p class="three_like">超爱<img src="images/detail26.jpg" /></p>
                            </li>
                            <li>
                                <img class="three_img1" src="images/detail22.jpg" />
                                <a href="#" class="three_a">小米Max完全匹配，不过价钱下调10-20性价比更好</a>
                                <p class="three_pline"></p>
                                <p class="three_text"><img src="images/detail23.jpg" /><span>你们都是在这里买的吗？ - <i>杨涛</i></span></p>
                                <p class="three_data"><span>谭伟杰</span><i>2016年5月21日 深空灰</i></p>
                                <p class="three_help">
                                    <a hrel="#"><span><img src="images/detail24.jpg" /></span><i>有帮助 (35)</i></a>
                                    <a class="noborder" href="#"><span><img src="images/detail25.jpg" /></span><i>无帮助 (1)</i></a>
                                </p>
                                <p class="three_like">超爱<img src="images/detail26.jpg" /></p>
                            </li>
                        </ul>
                    </div>

                    <div class="Louti_four">
                        <p class="Louti_title">售后服务与退换货流程</p>
                        <p class="Louti_line"></p>
                        <p class="louti_product">
                            <img src="/images/detail27.jpg" />
                            <span class="four_span">1) 自签收之日起，如配件齐全且无人为损坏，七天无理由退货，十五天换货。</span><br />
                            <span>2) 退换凭证:用户提供发票或三包凭证，以及发票底联或者发票(底联)复印件等有效证据.</span><br />
                            <span>3) 质量问题的退换，用户在线咨询，上传凭证，经确认后寄回检测，然后进入相关流程</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
</div>
<!--页脚-->
<div class="footer-box">
    <div class="footer">
        <ul>
            <li style="background:url(images/footer_icon01.png) no-repeat 40px center;"><a href="http://www.mi.com/static/fast/">1小时快修服务</a></li>
            <li style="background:url(images/footer_icon02.png) no-repeat 40px center;"><a href="http://www.mi.com/service/exchange#back">7天无理由退货</a></li>
            <li style="background:url(images/footer_icon03.png) no-repeat 40px center;"><a href="http://www.mi.com/service/exchange#free">15天免费换修</a></li>
            <li style="background:url(images/footer_icon04.png) no-repeat 40px center;"><a href="http://www.mi.com/service/exchange#mail">满150元包邮</a></li>
            <li style="background:url(images/footer_icon05.png) no-repeat 40px center;"><a href="http://www.mi.com/static/maintainlocation/">520余家售后网点</a></li>
            <div class="clearfix"></div>
        </ul>
        <div class="line"></div>

        <dl>
            <dd style="font-size:14px; font-family:'微软雅黑'; color:#424242; margin-bottom:28px;">帮助中心</dd>
            <dd><a href="http://www.mi.com/service/account/register/">购物指南</a></dd>
            <dd><a href="http://www.mi.com/service/account/register/">支付方式</a></dd>
            <dd><a href="http://www.mi.com/service/account/register/">配送方式</a></dd>
        </dl>
        <dl>
            <dd style="font-size:14px; font-family:'微软雅黑'; color:#424242; margin-bottom:28px;">服务支持</dd>
            <dd><a href="http://www.mi.com/service/exchange">售后政策</a></dd>
            <dd><a href="http://fuwu.mi.com/">自助服务</a></dd>
            <dd><a href="http://xiazai.mi.com/">相关下载</a></dd>
        </dl>
        <dl>
            <dd style="font-size:14px; font-family:'微软雅黑'; color:#424242; margin-bottom:30px;">线下门店</dd>
            <dd><a href="http://www.mi.com/c/xiaomizhijia/">小米之家</a></dd>
            <dd><a href="http://www.mi.com/static/maintainlocation/">服务网点</a></dd>
            <dd><a href="http://www.mi.com/static/familyLocation/">线下专区</a></dd>
        </dl>
        <dl>
            <dd style="font-size:14px; font-family:'微软雅黑'; color:#424242; margin-bottom:28px;">关于小米</dd>
            <dd><a href="http://www.mi.com/about">了解小米</a></dd>
            <dd><a href="http://hr.xiaomi.com/">加入小米</a></dd>
            <dd><a href="http://www.mi.com/about/contact">联系我们</a></dd>
        </dl>
        <dl>
            <dd style="font-size:14px; font-family:'微软雅黑'; color:#424242; margin-bottom:28px;">关注我们</dd>
            <dd><a href="http://weibo.com/xiaomishangcheng">新浪微博</a></dd>
            <dd><a href="http://xiaoqu.qq.com/mobile/share/index.html?url=http%3A%2F%2Fxiaoqu.qq.com%2Fmobile%2Fbarindex.html%3Fwebview%3D1%26type%3D%26source%3Dindex%26_lv%3D25741%26sid%3D%26_wv%3D5123%26_bid%3D128%26%23bid%3D10525%26from%3Dwechat">小米部落</a></dd>
            <dd><a href="http://xiaoqu.qq.com/mobile/share/index.html?url=http%3A%2F%2Fxiaoqu.qq.com%2Fmobile%2Fbarindex.html%3Fwebview%3D1%26type%3D%26source%3Dindex%26_lv%3D25741%26sid%3D%26_wv%3D5123%26_bid%3D128%26%23bid%3D10525%26from%3Dwechat">官方微信</a></dd>
        </dl>
        <dl style="margin-right:123px;">
            <dd style="font-size:14px; font-family:'微软雅黑'; color:#424242; margin-bottom:28px;">特色服务</dd>
            <dd><a href="https://account.xiaomi.com/pass/serviceLogin?callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttp%253A%252F%252Forder.mi.com%252Fqueue%252Ff2code%26sign%3DODI0YjlhNzZjNGEzOWM3YTk5NTg2OTQ4YjQxODkwMmQ3MTk4Yjc3YQ%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">F码通道</a></dd>
            <dd><a href="http://www.mi.com/giftcode/">小米移动</a></dd>
            <dd><a href="http://order.mi.com/misc/checkitem">防伪查询</a></dd>
        </dl>
        <div style="width:1px; height:111px; float:left; background-color:#e0e0e0; margin-top:10px; "></div>
        <div class="online">
            <p style="font-size:20px; color:#ff6700; margin-bottom:10px;">400-100-5678</p>
            <p style="font-size:12px; font-family:Arial,'宋体'; color:#616161; margin-bottom:7px;">周一至周日 8:00-18:00</p>
            <p style="font-size:12px; font-family:Arial,'宋体'; color:#616161; margin-bottom:18px;">（仅收市话费）</p>
            <div class="service">24小时在线客服</div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>



<!--合作-->
<div class="team-box">
    <div class="team">
        <div class="logo"><img src="/images/team_logo.png"></div>
        <div style="width:880px; float:left; margin-bottom:30px;">
            <p><a href="{$Think.const.THINK_URL}">小米网</a><a href="http://www.miui.com/">MIUI</a><a href="http://www.miliao.com/">米聊</a><a href="http://www.duokan.com">多看书城</a><a href="http://www.mi.com/c/appdownload/">小米路由器</a><a href="https://i.mi.com/">视频电话</a>
            <a href="https://i.mi.com/">小米后院</a><a href="https://i.mi.com/">小米天猫店</a><a href="https://i.mi.com/">小米淘宝直营店</a><a href="https://i.mi.com/">小米网盟</a><a href="https://i.mi.com/">问题反馈</a>
            <a href="https://i.mi.com/">Select Region</a>
        </p>
        <p style="margin-left:5px;">©mi.com京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 违法和不良信息举报
            电话：185-0130-1238</p>
        <p style="margin-left:5px;">本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
        <div class="clearfix"></div>
        </div>
        <div class="safe">
            <img style="float:left; margin-right:5px;" src="/images/safe_icon01.png">
            <span>诚信网站师范企业</span>
            <img style="float:left; margin-right:5px;" src="/images/safe_icon02.png">
            <span>可信网站信用评价</span>
            <img style="float:left; margin-right:5px;" src="/images/safe_icon03.png">
            <span style="margin-right:0;">网上交易保障中心</span>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="word">探索黑科技，小米为发烧而生</div>
</div>
<div style="height:20px; background-color:#fafafa;"></div>
<script>
/*页眉*/
$(".top_box .shop .car").hide()
$(".top_box .shop").mouseenter(
    function(){
        $(".login .shop").addClass("current")
        $(".login .shop .car").stop(true.true).slideToggle()
        $(".car").addClass("shadow_lf").addClass("shadow_rt")
        $(".bg01").addClass("bg02")
        }
).mouseleave(
    function(){
        $(".top_box .shop .car").stop(true.true).slideToggle()
        $(".top_box .shop ").removeClass("current")
        $(".bg01").removeClass("bg02")
        }
)
</script>
</body>
</html>
